@font-face
  font-family 'Material Icons'
  font-style normal
  font-weight 400
  src local('Material Icons'), local('MaterialIcons-Regular'), url(./assets/MaterialIcons-Regular.woff2) format('woff2')

@font-face
  font-family 'Roboto'
  font-style normal
  font-weight 400
  src local('Roboto'), local('Roboto-Regular'), url(./assets/Roboto-Regular.woff2) format('woff2')

.material-icons
  font-family 'Material Icons'
  font-weight normal
  font-style normal
  font-size 20px  /* Preferred icon size */
  display inline-block
  width 1em
  height 1em
  line-height 1
  text-transform none
  letter-spacing normal
  word-wrap normal
  white-space nowrap
  direction ltr
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale

html, body
  margin 0
  padding 0
  font-family Roboto
  font-size 16px
  color #444

*
  box-sizing border-box

$arrow-color = #444

.arrow
  display inline-block
  width 0
  height 0
  &.up
    border-left 4px solid transparent
    border-right 4px solid transparent
    border-bottom 6px solid $arrow-color
  &.down
    border-left 4px solid transparent
    border-right 4px solid transparent
    border-top 6px solid $arrow-color
  &.right
    border-top 4px solid transparent
    border-bottom 4px solid transparent
    border-left 6px solid $arrow-color
  &.left
    border-top 4px solid transparent
    border-bottom 4px solid transparent
    border-right 6px solid $arrow-color

.slide-up-enter
  opacity 0
  transform translate(0, 50%)

.slide-up-leave-active
  opacity 0
  transform translate(0, -50%)
